@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* Default (Comfortable) Density Variables */
        --spacing-base: 1rem;       /* 16px */
        --spacing-sm: 0.75rem;      /* 12px */
        --spacing-xs: 0.5rem;       /* 8px */
        --spacing-container: 1rem;  /* 16px */
        --font-size-h1: 1.25rem;    /* 20px */
        --font-size-h2: 1.125rem;   /* 18px */
        --font-size-h3: 1rem;       /* 16px */
        --font-size-body: 0.875rem; /* 14px */
        --font-size-label: 0.75rem; /* 12px */
        --font-size-btn: 0.875rem;  /* 14px */
        --input-py: 0.5rem;         /* 8px */
        --btn-py: 0.5rem;
        --btn-px: 1rem;
    }

    .compact {
        --spacing-base: 0.75rem;
        --spacing-sm: 0.5rem;
        --spacing-xs: 0.375rem;
        --spacing-container: 0.75rem;
        --font-size-h1: 1.125rem;
        --font-size-h2: 1rem;
        --font-size-h3: 0.875rem;
        --font-size-body: 0.875rem;
        --font-size-label: 0.75rem;
        --font-size-btn: 0.75rem;
        --input-py: 0.375rem;
        --btn-py: 0.375rem;
        --btn-px: 0.75rem;
    }

    .dense {
        --spacing-base: 0.5rem;
        --spacing-sm: 0.375rem;
        --spacing-xs: 0.25rem;
        --spacing-container: 0.5rem;
        --font-size-h1: 1rem;
        --font-size-h2: 0.875rem;
        --font-size-h3: 0.8rem;
        --font-size-body: 0.75rem;
        --font-size-label: 10px;
        --font-size-btn: 0.7rem;
        --input-py: 0.25rem;
        --btn-py: 0.25rem;
        --btn-px: 0.5rem;
    }

    body {
        @apply font-sans bg-slate-50 text-slate-800;
        @apply dark:bg-slate-950 dark:text-slate-300;
    }

    /* General input styling for consistency and dark mode */
    input[type="text"], 
    input[type="number"], 
    select, 
    textarea {
        @apply w-full mt-1 rounded-md transition-all duration-200 shadow-inner;
        padding-top: var(--input-py);
        padding-bottom: var(--input-py);
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        font-size: var(--font-size-body);
        /* Light mode styles */
        @apply bg-slate-100 border border-slate-300 placeholder-slate-400 text-slate-900;
        @apply hover:border-slate-400;
        @apply focus:ring-2 focus:ring-indigo-500/40 focus:border-indigo-500 focus:outline-none focus:bg-white;
        /* Dark mode styles */
        @apply dark:bg-slate-800 dark:border-slate-700 dark:placeholder-slate-500 dark:text-slate-200;
        @apply dark:hover:border-slate-600;
        @apply dark:focus:bg-slate-900 dark:focus:ring-2 dark:focus:ring-indigo-500/50 dark:focus:border-indigo-500 dark:focus:outline-none;
    }

    input[type="checkbox"] {
        @apply h-4 w-4 rounded shrink-0 transition-colors duration-200;
        @apply text-indigo-600 border-slate-400 bg-white;
        @apply focus:ring-1 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white;
        @apply dark:border-slate-600 dark:bg-slate-700;
        @apply dark:focus:ring-indigo-600 dark:focus:ring-offset-slate-900;
        @apply dark:checked:bg-indigo-600;
    }
    label {
        @apply block font-medium text-slate-600 dark:text-slate-400;
        font-size: var(--font-size-label);
    }

    h1 { font-size: var(--font-size-h1); }
    h2 { font-size: var(--font-size-h2); }
    h3 { font-size: var(--font-size-h3); @apply font-semibold; }
}

@layer components {
    /* Main panel headers and content areas use variables now */
    #left-panel > header, #right-panel > header {
        padding: var(--spacing-base);
    }
    #left-panel-scroller > div {
        padding: var(--spacing-container);
        gap: var(--spacing-base);
    }
    #left-panel-scroller > div > .space-y-4 {
        padding: var(--spacing-base);
    }
    .schema-item-card {
        padding: var(--spacing-base);
    }
    .grid {
        gap: var(--spacing-base);
    }
    #rootActionControls button, #addDefinitionBtn {
        padding: var(--btn-py) var(--btn-px);
        font-size: var(--font-size-btn);
    }
    .dense #left-panel > header p {
        display: none;
    }
    .nested-level {
        margin-left: var(--spacing-sm);
        padding-left: var(--spacing-sm);
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-sm);
    }
    .pydantic-tab {
        border-color: transparent;
        @apply text-slate-500 hover:text-slate-700 hover:border-slate-300 dark:text-slate-400 dark:hover:text-slate-300 dark:hover:border-slate-700;
    }
    .pydantic-tab.active-tab {
        @apply text-indigo-600 border-indigo-500 dark:text-indigo-400 dark:border-indigo-400;
    }
}

@layer utilities {
    /*
     * FIX: Force highlight.js background to be transparent.
     * This allows the container's background color to show through, ensuring
     * consistency with the app's theme. The text colors from the hljs theme
     * will still apply for syntax highlighting.
     */
    .hljs {
        @apply !bg-transparent;
    }

    /* Custom scrollbar for a polished look */
    ::-webkit-scrollbar { @apply w-2 h-2; }
    ::-webkit-scrollbar-track { @apply bg-slate-200 dark:bg-slate-800 rounded; }
    ::-webkit-scrollbar-thumb { @apply bg-slate-400 dark:bg-slate-600 rounded; }
    ::-webkit-scrollbar-thumb:hover { @apply bg-slate-500 dark:bg-slate-500; }

    /* Resizable panel handle */
    .resizer {
        @apply flex-shrink-0 bg-slate-300 dark:bg-slate-800 cursor-col-resize z-10;
        flex-basis: 6px;
        transition: background-color 0.2s ease;
    }
    .resizer:hover {
        @apply bg-indigo-500;
    }

    /* Card styles for schema items */
    .schema-item-card {
        transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }

    /* Styling for nested levels to create visual hierarchy */
    .nested-level {
        @apply border-l-2;
        @apply border-slate-300 dark:border-slate-700;
    }

    /* Specific border colors for different complex types */
    .nested-level.object-properties { @apply border-sky-500; }
    .nested-level.array-items { @apply border-teal-500; }
    .nested-level.oneof-options { @apply border-violet-500; }
    .nested-level.defs-properties { @apply border-amber-500; }
    .nested-level.additional-properties { @apply border-rose-500; }
    .nested-level.if-schema { @apply border-green-500; }
    .nested-level.then-schema { @apply border-blue-500; }
    .nested-level.else-schema { @apply border-orange-500; }

    /* Drag & Drop visual feedback */
    .drag-handle { @apply cursor-grab; }
    .dragging {
        @apply opacity-50 bg-indigo-100 dark:bg-indigo-900/50;
    }
    .drop-zone-active {
        @apply outline-2 outline-dashed outline-indigo-500 -outline-offset-2;
    }

    /* Modal backdrop */
    .modal-backdrop {
        @apply bg-black/50;
        transition: opacity 0.3s ease;
    }

    /* Hide number input spinners */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }
    input[type=number] {
      -moz-appearance: textfield;
    }

    /* Collapsible content transition */
    .schema-item-card > .collapsible-content {
        margin-top: var(--spacing-base);
    }
    .collapsible-content {
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease-in-out, margin-top 0.5s ease-in-out;
    }
    .collapsible-content.collapsed {
        max-height: 0;
        margin-top: 0 !important;
        opacity: 0;
    }

    /* For clickable schema viewer */
    [data-clickable="true"] {
        @apply cursor-pointer transition-colors duration-200;
    }
    [data-clickable="true"]:hover {
        @apply text-indigo-600 dark:text-indigo-400;
    }

    @keyframes flash {
      from { background-color: rgba(99, 102, 241, 0.3); } /* bg-indigo-500/30 */
      to { background-color: transparent; }
    }
    .highlight-flash {
        animation: flash 1.5s ease-out;
        border-radius: 0.25rem; /* Add a slight radius to the flash */
    }
}
